<nz-card style="width:100%;" [nzBordered]="false" [nzTitle]="'查询表格'" [nzExtra]="tableToolbar">
  <ng-content></ng-content>
</nz-card>
<ng-template #tableToolbar>
  <div class="ant-pro-table-toolbar">
    <div class="ant-pro-table-toolbar-option" *ngIf="btnTpl">
      <ng-container *ngTemplateOutlet="btnTpl"></ng-container>
    </div>
    <div class="ant-pro-table-toolbar-default-option" *ngIf="isNormalTable">
      <nz-divider nzType="vertical"></nz-divider>
      <nz-space [nzSize]="16" nzDirection="horizontal">
        <i class="hand-model" nz-popover
           nzPopoverTitle="Title"
           nzPopoverPlacement="bottomRight"
           [(nzPopoverVisible)]="tableConfigVisible"
           nzPopoverTrigger="click"
           [nzPopoverContent]="contentTemplate" nz-icon *nzSpaceItem nzType="setting" nzTheme="outline"
           nz-tooltip
           nzTooltipTitle="列设置"></i>
        <i class="hand-model" (click)="reloadClick()" nz-icon *nzSpaceItem nzType="reload" nzTheme="outline" nz-tooltip
           nzTooltipTitle="刷新"></i>
        <i class="hand-model" nzTrigger="click" nz-dropdown [nzDropdownMenu]="tableSizeMenu" nz-icon *nzSpaceItem
           nzType="column-height" nzTheme="outline" nz-tooltip nzTooltipTitle="密度"></i>

      </nz-space>
    </div>
  </div>
</ng-template>
<nz-dropdown-menu #tableSizeMenu>
  <ul nz-menu>
    <li nz-menu-item (click)="tableSizeMenuClick(item)" [nzSelected]="item.selected"
        *ngFor="let item of tableSizeOptions">
      <span>{{item.sizeName}}</span>
    </li>
  </ul>
</nz-dropdown-menu>
<ng-template #contentTemplate>
  <ul style="min-width: 315px;" cdkDropList (cdkDropListDropped)="dropTableConfig($event)">
    <li cdkDrag class="flex space-between" style="padding: 4px 16px 8px 0" *ngFor="let item of tableHeaders">
      <div>
        <i cdkDragHandle class="m-r-8 hand-model-move" nz-icon nzType="drag" nzTheme="outline"></i>
        <label nz-checkbox (nzCheckedChange)="changeTableConfigShow()" [(nzChecked)]="item.show">{{item.title}}</label>
      </div>
      <div>
        <i class="hand-model" (click)="fixedTableHead('left',item)"
           [ngStyle]="{color:item.fixedDir==='left'&&item.fixed?'#409eff':''}" nz-tooltip nzTooltipTitle="固定到左侧" nz-icon
           nzType="vertical-right" nzTheme="outline"></i>
        <nz-divider nzType="vertical"></nz-divider>
        <i class="hand-model" (click)="fixedTableHead('right',item)"
           [ngStyle]="{color:item.fixedDir==='right'&&item.fixed?'#409eff':''}" nz-tooltip nzTooltipTitle="固定到右侧"
           nz-icon nzType="vertical-left" nzTheme="outline"></i>
      </div>
    </li>
  </ul>
</ng-template>
